<template>
  <view :class="classNames" @click="itemClick">
    <view v-if="active" class="icon">
      <Aicon name="guanzhu-zhihui" color="red" />
    </view>
    <view v-else class="noicon">
      <Aicon name="guanzhu-zhihui" />
    </view>
    <!-- <image mode="aspectFill" src="https://img1.baidu.com/it/u=1698230686,1403263853&fm=253&fmt=auto?w=800&h=1241">
      </image> -->
    <text class="name">
      {{ text }}
    </text>
  </view>
</template>

<script lang="ts">
import { computed, defineComponent, getCurrentInstance, inject } from "vue";
import Aicon from "../arco-icon/index.vue";
import context from "../tabbar/context";

export default defineComponent({
  name: "",
  components: {
    Aicon,
  },
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    icon: {
      type: String,
      default: "",
    },
    text: {
      type: String,
      default: "",
    },
  },
  emits: ["click", "beforeClick", "update:active"],
  setup() {
    const instance = getCurrentInstance();
    const prefixCls = "arco-tabbarItem";
    const tabsCtx = inject(context.tabbarsInjectionKey, {
      activeKey: -1,
      handleEvent: () => {},
      addkey: () => {},
      getIindex: (params: number) => {
        return params;
      },
    });
    tabsCtx.addkey(instance?.uid as number);
    const key = computed(() => {
      return tabsCtx.getIindex(instance?.uid as number);
    });
    const active = computed(() => key.value === tabsCtx.activeKey);

    function itemClick() {
      console.log(tabsCtx, "我要点击了???");
      tabsCtx.handleEvent(key.value);
    }

    const classNames = computed(() => {
      return [
        prefixCls,
        "arco-btn-size-medium",
        //   `${prefixCls}-${(props.type)!= null ? props.type : "secondary"}`,
        {
          [`${prefixCls}-active`]: active.value,
        },
      ];
    });

    return {
      itemClick,
      active,
      classNames,
    };
  },
});
</script>

<style scoped lang="scss">
.arco-tabbarItem {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.arco-tabbarItem-active {
  .name {
    color: red;
  }
}

.icon {
  animation: scale 0.4s ease-in-out;
}

@keyframes scale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1);
  }
}

image {
  width: 30rpx;
  height: 30rpx;
  margin-bottom: 10rpx;
}

text {
  font-size: 22rpx;
}
</style>
